<template>
  <div class="relative-list-wrapper">
    <div class="relative-list-top">
      <FList @select="relativeSelect"
             :selected-key="relativeSelectedKey"
             :data-source="relativeType" size="small"
             title-name="relativeName"></FList>
    </div>
    <div class="relative-list-center">
      显示详情
    </div>
    <div class="relative-list-bottom">
      <FList @select="relativeSubSelect"
             @doubleClick="createRelativeConfig"
             :selected-key="relativeTypeSubKey"
             :data-source="relativeTypeSubList" size="small"
             title-name="relativeName"></FList>
    </div>
  </div>
</template>

<script>
import {relativeType, UserConfig} from '@/components/UserSelectorModal/DefaultUserConfig';
import FList from '@/components/FList';
import {guid} from '@/utils/CommonUtils';

export default {
  name: "RelativeList",
  components: {
    FList
  },
  data() {
    return {
      relativeType,
      relativeSelectedKey: undefined,
      relativeTypeSubKey: undefined,
      relativeTypeSubList: [],
    };
  },
  methods: {
    relativeSelect(relative) {
      this.relativeTypeSubList = relative.children;
      this.relativeSelectedKey = relative.id;
    },
    createRelativeConfig(relativeSub) {
      let res = JSON.parse(JSON.stringify(UserConfig));
      res.type = 'relativeRole';
      res.relativeType = relativeSub.id;
      res.relativeName = relativeSub.relativeName;
      res.configName = relativeSub.relativeName;
      res.id = guid();
      this.$emit('create', res);
    },
    relativeSubSelect(relativeSub) {
      this.relativeTypeSubKey = relativeSub.id;
    },
  }
};
</script>

<style scoped>
.relative-list-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.relative-list-center {
  border-color: rgb(220, 223, 230);
  border-width: 1px 0 1px 0;
  border-style: solid;
  padding: 5px 10px;
}

.relative-list-top,
.relative-list-bottom {
  flex: 0.5;
}
</style>